<template>
    <div>
        <Navigator></Navigator>
        <Header></Header>
        <div id="body">
            <div class="title">
                Upload File Of Article
            </div>
            <div class="basic_inf">
                <div class="name">
                    <el-input type="text" placeholder="article name" v-model="name"></el-input>
                </div>
                <div class="created_by">
                    <el-input type="text" placeholder="author name" v-model="createdBy"></el-input>
                </div>
            </div>
            <div class="add_file">
                <el-button @click="uploadFile">Upload</el-button>
                <label>
                    <input type="file" @change="getFile" ref="fileId" id="file" hidden/>
                </label>
            </div>

            <div class="submit">
                <el-button @click="submitFile">submit</el-button>
            </div>
        </div>

    </div>
</template>

<script>
    import Header from "@/components/Header";
    import Navigator from "@/components/Navigator";
    export default {
        name: "AddArticle",
        components: {Navigator, Header},
        data(){
            return{
                file: null,
                articleData: null,
                name: null,
                createdBy: null
            }
        },
        methods:{
            getFile:function () {
                this.file = this.$refs.fileId.files[0]
            },
            submitFile:function () {
                const formData = new window.FormData()
                const config = {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    }
                }

                formData.append('tag_id', parseInt(this.$route.query.tag_id))
                formData.append('file', this.file)
                formData.append("token", sessionStorage.getItem("token"))
                formData.append("name", this.name)
                formData.append("created_by", this.createdBy)
                formData.append("time", new Date().getFullYear().toString())
                this.axios.post('/article/add',formData,config).then(res=>{
                    res = res.data
                    if (res.code === 200){
                        this.$message({
                            message: 'uploaded successfully',
                            type: 'success'
                        })
                        window.location.href = "./article" + "?tag_id=" + this.$route.query.tag_id
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })

            },
            uploadFile:function () {
                document.getElementById("file").click()
            }
        }
    }
</script>

<style scoped lang="scss">
    #body{
        width: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

        margin: 100px auto;

        display: flex;
        flex-direction: column;

        .title{
            font-size: 32px;
            font-weight: 500;
            margin: 20px auto;
        }
        .basic_inf{
            .name{
                width: 50% !important;
                margin: 20px auto;
            }
            .created_by{
                width: 50% !important;
                margin: 0 auto;
            }
        }

        .add_file{
            margin: 30px auto;
        }

        .submit{
            margin: 20px auto;
        }
    }
</style>
